<template>
  <el-table
    :data="list"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      prop="id"
      label="任务编号"
      width="130"
    />
    <el-table-column
      prop="startAgency"
      label="起始地"
      width="110"
    />
    <el-table-column
      prop="endAgency"
      label="目的地"
    />
    <el-table-column
      prop="licensePlate"
      label="车辆"
    />
    <el-table-column
      v-slot="{row}"
      prop="status"
      label="任务状态"
    >
      <span>{{ row.status === 2 ? '进行中' : '已完成' }}</span>
    </el-table-column>
  </el-table>
</template>

  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
    }
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0 || rowIndex === 2 || rowIndex === 4 || rowIndex === 6) {
        return 'warning-row'
      } else if (rowIndex === 1 || rowIndex === 3 || rowIndex === 5) {
        return 'success-row'
      }
      return ''
    }

  }

}
</script>
